<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>三级联动</title>
    <!-- Bootstrap -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <select name="" id="selProvince">
        <option value="">----请选择----</option>
    </select>
    <select name="" id="selCity">
        <option value="">----请选择----</option>
    </select>
    <select name="" id="selCountry">
        <option value="">----请选择----</option>
    </select>
</body>

<input type="hidden" name="first" id="first" value="{{$first}}">
{{--<input type="hidden" name="second" id="second" value="{{$second}}">--}}
{{--<input type="hidden" name="third" id="third" value="{{$third}}">--}}
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/bootstrap/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var first = eval($("#first").val());
    $(function () {
        for(var i=0;i<first.length;i++){
            $('#selProvince').append('<option value="'+first[i].id+'">'+first[i].district_name+'</option>');
        };

        $('#selProvince').change(function () {
            var option = $("#selProvince option:selected");
            var pid = option.val();
            $('#selCity').children().not(':eq(0)').remove();
            $('#selCountry').children().not(':eq(0)').remove();
            $.post('/index/front/postThreeSelect',{pid:pid},function(data){
                // console.log(data);
                for(var j=0;j<data.length;j++){
                    $('#selCity').append('<option value="'+data[j].id+'">'+data[j].district_name+'</option>');
                }
            });
        });

        $('#selCity').change(function () {
            var option = $("#selCity option:selected");
            var pid =  option.val();
            $('#selCountry').children().not(':eq(0)').remove();
            $.post('/index/front/postThreeSelect',{pid:pid},function(data){
                for(var k=0;k<data.length;k++){
                    $('#selCountry').append('<option value="'+data[k].id+'">'+data[k].district_name+'</option>');
                }
            });
        });
    })
</script>
</html>